<template>
  <view v-if="show" >
    <view v-for="(item, key) in skeletonRegion"  :key="key">
      <block v-if="item.isShow" >
        <view
        v-for="(pItem, pIndex) in item.skeletonRectLists"
        :key="pIndex"
        class="shine"
        :style = "{ width: (pItem.dataset.sWidth || pItem.width) + 'px',
        height: (pItem.dataset.sHeight || pItem.height) + 'px',
        position: 'absolute',
        left: pItem.left + 'px',
        top: pItem.top + 'px'
        }">
        </view>
       <view
        v-for="(pItem, pIndex) in item.skeletonCircleLists"
        :key="pIndex"
        class="shine"
        :style = "{ width: pItem.width + 'px',
        height: pItem.height + 'px',
        borderRadius: pItem.width + 'px',
        position: 'absolute',
        left: pItem.left + 'px',
        top: pItem.top + 'px'
        }">
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  export default{
    props: {
      region: {
      	type: Object,
        default: () => null
      },
      moduleNum: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        skeletonRegion: {},
        show: false
      }
    },
    watch: {
      region: {
        handler(field) {
          for(let key in field) {
            this.skeletonRegion[key].isShow = field[key]
          }
        },
        deep: true
      }
    },
    methods: {
      async initRendor() {
        //异步等待
        for(let key in this.region) {
        	this.skeletonRegion[key] = {
        		isShow: true,
        		skeletonRectLists: [],
        		skeletonCircleLists: []
        	}
        }

        //节点信息采集
        await this.promiseAll();
        this.show = true;
      },
      promiseAll() {
        //绘制矩形, 绘制圆形
        return Promise.all([this.rectHandle(), this.radiusHandle()]);
      },
      rectHandle() {
        const _this = this;
        let arr = [], i = 0;
        return new Promise((resolve) => {
          for(let key in this.skeletonRegion) {
            wx.createSelectorQuery()
            .selectAll(`.sk >>> .sk-${key}-rect`)
            .boundingClientRect().exec((res) => {
              arr = arr.concat(res[0]);
              i= i + 1;
              //节点该类型信息获取完毕
              if(i === this.moduleNum) {
                this.skeletonRegion[key].skeletonRectLists = arr;
                resolve();
              }
            });
          }
        })
      },
      radiusHandle() {
        const _this = this;
        let arr = [], i = 0;
        return new Promise((resolve) => {
          for(let key in this.skeletonRegion) {
            wx.createSelectorQuery()
            .selectAll(`.sk >>> .sk-${key}-radius`)
            .boundingClientRect().exec((res) => {
              arr = arr.concat(res[0]);
              i= i + 1;
              //节点该类型信息获取完毕
              if(i === this.moduleNum) {
                this.skeletonRegion[key].skeletonCircleLists = arr;
                resolve();
              }
            });
          }
        })
      }
    }


  }
</script>

<style lang="less" scoped >
  @keyframes shine {
    from {
        background-position: 0 0 ;
    }
    to {
        background-position: 20rem 0;
    }
  }
  .shine {
    background: #ededed;
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.09) 15%, transparent 25%);
    background-size: 20rem 20rem;
    animation: shine 1.5s linear infinite;
  }

  .wipe {
    overflow: hidden;
    margin: 0 auto;
    display: inline-flex;
    animation-name: wipe;
  }
  @keyframes wipe {
    to { width: 0 }
  }
</style>
